<template>
  <div class="main-container">
    <div class="query-box">
      <el-form :inline="true" :model="queryInfo" class="demo-form-inline" label-width="80px">
        <el-row>
          <el-form-item label="ID：">
            <el-input v-model="queryInfo.id" placeholder="请输入日志ID"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label=" " class="submit">
            <el-button type="primary" @click="getErrList">筛选</el-button>
            <el-link type="primary" :underline="false">清空筛选条件</el-link>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-table :data="errList" style="width: 100%">
      <el-table-column label="ID" width="60" prop="id" align="center"> </el-table-column>
      <!-- <el-table-column label="用户ID" width="220" prop="uid" align="center"></el-table-column> -->
      <!-- <el-table-column label="昵称" width="180" prop="nickname"> </el-table-column> -->
      <el-table-column label="错误提示" prop="msg" align="center"> </el-table-column>
      <el-table-column label="请求IP" width="180" prop="ip" align="center"> </el-table-column>
      <el-table-column label="请求时间" width="180" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.add_time | timeFormat('yy-mm-dd hh:MM:ss') }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情弹窗 -->
    <el-dialog title="日志详情" :visible.sync="errDialog">
      <el-form :model="log" label-width="80px" :inline="false" label-position="left">
        <el-form-item label="错误信息：">
          <div style="line-height: 36px">{{ log.msg }}</div>
        </el-form-item>
        <el-form-item label="请求链接：">
          <div style="line-height: 36px">
            <el-button type="text">{{ log.url }}</el-button>
          </div>
        </el-form-item>
        <el-form-item label="请求头：">
          <json-viewer :value="log.header"></json-viewer>
        </el-form-item>
        <el-form-item label="请求参数：">
          <json-viewer :value="log.data"></json-viewer>
        </el-form-item>
      </el-form>
    </el-dialog>
    <pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"></pagination>
  </div>
</template>

<script>
import { getErrList } from '@/api/system'
export default {
  data() {
    return {
      queryInfo: {
        id: '',
        page: 1,
        page_size: 10,
      },
      errList: [],
      total: 0,
      errDialog: false,
      log: {},
    }
  },
  created() {
    this.getErrList()
  },
  methods: {
    async getErrList() {
      const res = await getErrList(this.queryInfo)
      if (res.status != 1) return this.$message.error(res.msg)
      // this.$message.success(res.msg)
      console.log(res.data)
      this.errList = res.data.data
      this.total = res.data.total
    },
    showDetail(row) {
      this.log = row
      this.errDialog = true
    },
    handleSizeChange(newSize) {
      this.queryInfo.page_size = newSize
      this.getErrList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getErrList()
    },
  },
}
</script>

<style lang="scss" scoped>
.query-box {
  margin-bottom: 20px;
  padding: 20px 40px;
  background: #f8f8f8;
  .submit {
    .el-button {
      margin-right: 20px;
    }
  }
}
::v-deep {
  .el-table__row {
    height: 60px !important;
  }
  .el-form-item__label {
    color: #99a9bf;
  }
  .jv-container {
    padding: 0 !important;
  }
  .jv-code {
    padding: 3px;
  }
}
</style>
